<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/dist/css/bootstrap.css" >
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>员工表</title>
</head>
<body>
    <nav class="navbar navbar-dark col-lg-12 bg-dark ">
        <div class="toggle " onclick="toggleMenu()">
            <img src="bootstrap-outline.svg">
        </div>
        <div class="col-lg-1 ">
            <a class="navbar-brand float-left" href="#">Company name</a>
        </div>

        <div class="navbar-brand col-lg-8 text-center">
            <span >Talk is cheap,show me your code</span>
        </div>

        <ul class="navbar-nav px-3 col-lg-1 text-center">
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="login.html">username</a>
                <!--                    这是 写死的  usename   -->
            </li>
        </ul>
    </nav>

    <div  class="navigation ">
        <ul>
            <li>
                <a  href="list.html">
                    <span class="icon"><i class="fa fa-home" aria-hidden="true"></i></span>
                    <span class="title">员工表</span>
                </a>
            </li>
            <li >
                <a  href="yewu.html">
                    <span class="icon"><i class="fa fa-user" aria-hidden="true"></i></span>
                    <span class="title">业务进度</span>
                </a>
            </li>
            <li >
                <a  href="renshi.html">
                    <span class="icon"><i class="fa fa-comment" aria-hidden="true"></i></span>
                    <span class="title">人事流程</span>
                </a>
            </li>
            <li >
                <a href="caiwu.html">
                    <span class="icon"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
                    <span class="title">财务报销</span>
                </a>
            </li>
        </ul>
    </div>

    <div class="table-responsive">
    <table class="table  table-striped text-center">
        <thead>
            <tr>
            <th width="16%" >工号</th>
            <th width="14%" >姓名</th>
            <th width="18%" >电话</th>
            <th width="16%" >部门</th>
            <th width="16%" >职务</th>
            <th width="20%">邮箱</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>20150101</td>
            <td>李玉琼</td>
            <td>13386746135</td>
            <td>人事</td>
            <td>主管</td>
            <td>liyuqiong@company.com</td>
        </tr>
        <tr>
            <td>20150102</td>
            <td>何丽</td>
            <td>15584668246</td>
            <td>人事</td>
            <td>职员</td>
            <td>heli@company.com</td>
        </tr>
        <tr>
            <td>20150201</td>
            <td>韩志军</td>
            <td>17765125896</td>
            <td>产品</td>
            <td>经理</td>
            <td>hanzhijun@company.com</td>
        </tr>
        <tr>
            <td>20150301</td>
            <td>邓勇</td>
            <td>15933626659</td>
            <td>开发</td>
            <td>职员</td>
            <td>dengyong@company.com</td>
        </tr>
        <tr>
            <td>20180302</td>
            <td>高志</td>
            <td>13564269877</td>
            <td>开发</td>
            <td>职员</td>
            <td>gaozhi@company.com</td>
        </tr>
        <tr>
            <td>20150401</td>
            <td>刘祝君</td>
            <td>15536258941</td>
            <td>测试</td>
            <td>主管</td>
            <td>liuzhujun@company.com</td>
        </tr>
        <tr>
            <td>20150501</td>
            <td>方琼</td>
            <td>13455112069</td>
            <td>设计</td>
            <td>主管</td>
            <td>fangqiong@company.com</td>
        </tr>

        </tbody>
    </table>
    </div>









    <script type="text/javascript">
        function toggleMenu(){
            let navigation = document.querySelector('.navigation');
            let toggle = document.querySelector('.toggle');
            navigation.classList.toggle('active');
            toggle.classList.toggle('active');
        }
    </script>

</body>
</html>